<template>
	<view class="container tui-skeleton">
		<tui-navigation-bar @init="initNavigation" :isOpacity="false" :maxOpacity="1" :scrollTop="scrollTop"
			backgroundColor="#fff" color="#333" :title="pageTitle">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack"></view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<view class="section section-serve version-number" v-show="isReqstFinish">
				<view class="section-serve-item" v-if="isReqstFinish===true">
					<view class="name">接单状态</view>
					<!-- <view class="arrow dy-iconfont icon-qiehuanqiyou"></view> -->
					<uv-switch activeColor="#A7F517" inactiveColor="#F6F8F7" :value="state"
						@change="stateChange"></uv-switch>
				</view>
				<view class="center" v-else>
					加载失败请重试
				</view>
			</view>
		</view>
		<survey-pop></survey-pop>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	const app = getApp();
	import {
		OwnDetail,
		UpdateUser
	} from "@/utils/requset/api.js"
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				skeletonShow: true, //加载
				pageTitle: '接单状态', //标题
				state: false,
				isReqstFinish: false,

			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			OwnDetail().then((res) => {
				if (res.code == 0 || res.code == 200) {
					this.state = res.data.shelfState == 1 ? true : false;
					this.isReqstFinish = true;
				} else {
					this.isReqstFinish = "err";
				}
			}).catch(() => {
				this.isReqstFinish = "err";
			})
		},
		onShow: function() {},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			goLogin() {
				app.doLogin()
			},
			stateChange(value) {
				this.$refs.toast.show({
					type: 'loading',
				})
				UpdateUser({
					data: {
						shelfState: value ? 1 : 0
					}
				}).then((res) => {
					this.$refs.toast.hide();
					if (res.code === 0 || res.code === 200) {
						this.state = value;
					} else {
						this.$refs.toast.show({
							type: 'default',
							message: res.msg || res.message
						});
						setTimeout(() => {
							this.$refs.toast.hide();
						}, 1000)
					}

				}).catch((res) => {
					this.$refs.toast.hide();
					this.$refs.toast.show({
						type: 'error',
						message: res.msg || res.message || "错误"
					});
					setTimeout(() => {
						this.$refs.toast.hide();
					}, 1000)
				})
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F6F8F7;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.main {
			box-sizing: border-box;
			padding-top: 200rpx;

			.center {
				font-size: 26rpx;
				text-align: center;
			}

			// padding: 176rpx 24rpx 66rpx;


			.section {
				box-sizing: border-box;
				background: #FFFFFF;
			}



			.section-serve {
				padding: 0 36rpx;

				.title {
					font-size: 28rpx;
					color: #282D2D;
					line-height: 37rpx;
				}

				.section-serve-item {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 36rpx 0;
					border-bottom: 2rpx solid #E3E9E5;

					&.noneBorder {
						border-bottom: none;
					}

					.icon {
						height: 35rpx;
						margin-right: 16rpx;
					}

					.name {
						flex: 1;
						font-size: 30rpx;
						font-weight: 400;
						color: #282D2D;
						line-height: 40rpx;
					}

					.arrow {
						color: #BBBCBB;
						font-size: 24rpx
					}
				}
			}

			.version-number {
				margin-bottom: 20rpx;

				.section-serve-item {
					border-bottom: none;
				}
			}

		}
	}
</style>